<!--
* @Description WatermarkIndex 水印
* @author 三咲问道
* @date 2025/6/5
-->
<template>
  <div class="WatermarkIndex">
    <div>WatermarkIndex 水印</div>

    <div class="svg-content">
      <div>canvas水印</div>
        <canvas id="watermarkCanvas"></canvas>
    </div>

    <div class="svg-content">
      <div>svg水印</div>
      <template v-for="item in 32">
        <svg class="rotate" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
          <text x="10" y="50" font-size="16" fill="rgba(204, 204, 204, 0.5)">svg水印内容</text>
        </svg>

      </template>
    </div>

    <div class="svg-content">
      <div>element-plus Watermark</div>
<!--      <el-watermark-->
<!--          :width="100"-->
<!--          :height="25"-->
<!--          image="https://element-plus.org/images/element-plus-logo.svg"-->
<!--      >-->
<!--        <div style="height: 240px" />-->
<!--      </el-watermark>-->

      <el-watermark
          :content="['element-plus', 'Watermark']"
          :gap="[30,10]"
      >
        <div style="height: 240px" />
      </el-watermark>
    </div>

  </div>
</template>

<script setup lang="ts">

import {nextTick} from "vue";

/**  Canvas水印 */
const watermarkCanvasHandle = ()=>{
  const canvas = document.getElementById('watermarkCanvas');
  const ctx = canvas?.getContext('2d');

  // ctx.font = '18px Arial';
  // ctx.fillStyle = 'rgba(204, 204, 204, 0.5)';
  // ctx.rotate(-45 * Math.PI / 180)
  // ctx.restore()
  // ctx.fillText('前端水印', 5, 100);
  // canvas.width = window.innerWidth;
  canvas.width = 1640;
  canvas.height = 240;
  // canvas.height = '260px';

  let text = 'canvas前端水印';
  let width = canvas.width;
  let height = canvas.height;
  ctx.font = '18px Arial';
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // 旋转并重复绘制水印文本
  for (let x = 0; x < width; x += 120) {
    for (let y = 0; y < height; y += 100) {
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(- Math.PI / 6);
      ctx.fillText(text, 0, 0);
      ctx.restore();
    }
  }
}



nextTick(() => {
  watermarkCanvasHandle()
})

</script>

<style scoped lang="less">
.WatermarkIndex {

  .svg-content {
    border: 1px solid red;
    background-color: #fff;
    height: 260px;
    margin-top: 12px;
  }

  .rotate {
    transform: rotate(-22deg);
  }

  .watermark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
    background-repeat: repeat;
    opacity: 0.2;
  }
}
</style>